<!--提货-签收订单列详情-->
<template>
  <div class="contain">
    <app-header></app-header>
    <div class="dt-head add">
      <!-- <div class="dt-head-fix"> -->
        <detail-header :status="'请安排提货'" :id="todolist"></detail-header>
        <!--tab-->
        <div class="lltab mb10 ft14">
          <tab bar-active-color="#77babd" defaultColor="#333333" active-color="#77babd" :line-width='2'>
            <tab-item selected @on-item-click="tab=true">商品信息</tab-item>
            <tab-item @on-item-click="tab=false">订单反馈</tab-item>
          </tab>
        </div>
      <!-- </div> -->
    </div>
    <div class="detail-tab-lft" v-if="tab">
      <div class="detail-supply">
        <i class="iconfont icon-supplier ft17"></i>
        {{todolist.SupplierName}}
      </div>
      <!-- 快速下单的详情start -->
      <div class="detail-fedbck df-body-nopad" v-if="tododetail.length == 0">
        <voice-msg :id="todolist"></voice-msg>
      </div>
      <!-- 快速下单的详情end -->
      <div class="detail-goods-list" v-for="item in tododetail">
        <div class="displayflex list-goods-warp">
          <div class="pic">
            <img :src="item.PictContent | filterImgUrl">
          </div>
          <div class="msg flex1">
            <p class="ft17">{{item.SupplierGoodsName}}</p>
            <p>{{item.SupplierGoodsSpec}}</p>
            <p>{{item.Producer}}</p>
            <p>共订货{{item.SupplierPoQty}}{{item.SupplierUnit}} 合计:<em class="def-color">￥{{item.Amount | fmoney}}</em>
            </p>
          </div>
        </div>
        <div class="detail-num-ope cf">
          <div class="f-l cf cho-num">
            <em class="f-l label">提货数</em>
            <div class="num-sele f-l">
              <x-number :min="0" fillable 
                        :max="item.SupplierPoQty"
                        v-model="item.PurchaserPoQty"></x-number>
            </div>
          </div>
          <div class="btn f-r" @click="pick">提货</div>
          <span class="f-r gray sure-num dis-none">配送数：{{item.PurchaserPoQty}}</span>
        </div>
        <div class="tag-state dis-none"><img src="~images/icon/tag_yth.png"></div>
      </div>
      <div class="detail-goods-list mt30">
        <p class="detail-mark ft17" v-if="todolist.Memo"><em class="ft17">备注留言：</em><i class="gray">{{todolist.Memo}}</i></p>
        <div class="detail-num" v-if="tododetail.length==0">
          <em v-if="todolist.CountSum>0">共{{todolist.CountSum}}种商品</em>小计:<span class="red">￥{{todolist.DetailSum | fmoney}}</span>
        </div>
      </div>
      <!--物流信息start-->
      <mt-popup
        v-model="popupVisible"
        position="center"
        class="pop-customs">
        <div class="detail-customs spe">
          <p>要求提货日期：{{todolist.Date1 | timeshort}} （{{todolist.Date1 | jsDateDiff}}）</p>
          <p>提货地址：{{addlist.DepartureProvince | province}} {{addlist.DepartureCity | city}} {{addlist.DepartureDistrict | district}} {{addlist.DepartureAddress}}</p>
          <p>要求到货日期：{{todolist.PlanEndDate | time}}
            <span v-if="todolist.BillState!='P07' && todolist.BillState!='P10'">（{{todolist.PlanEndDate | jsDateDiff}}）</span>
          </p>
          <p>下单时间：{{todolist.BillDate | timeshort}}</p>
        </div>  
        <i class="iconfont icon-add" @click="popupVisible=false"></i>
      </mt-popup>
      <!--物流信息end-->
      <div class="detail-bottom">
        <div class="btn" @click="showLog">物流要求</div>
        <div class="btn" @click="next">整单提货</div>
      </div>
    </div>
    <template v-if="!tab">
      <feed-back :guid="todolist.Guid" :billno='todolist.BillNo'></feed-back>
    </template>
  </div>
</template>

<script>
import detailHeader from '@/components/core/header/detail_header.vue';
import feedBack from '@/components/share/billfb/billfb.vue';
import voiceMsg from '@/components/share/voiceMsg/voicemsg.vue';
import appHeader from '@/components/core/header/app_header.vue';
export default {
  name:'driverDetail',
  components: {
    detailHeader,
    feedBack,
    voiceMsg,
    appHeader
  },
  data() {
    return {
      tab: true,
      todolist: [],
      tododetail: [],
      Thbilldata:[],
      addlist:[],
      popupVisible:false,
    }
  },
  created() {
    this.getdata();
  },
  computed:{
    guid(){
      return this.$route.query.id;
    }
  },
  methods: {
    showLog(){
      // var htmlV = $("#msgBox").html();
      // this.MessageBox.alert(htmlV,"物流信息").then(action => {
      // });
      this.popupVisible = true;
    },
    pick(e) {
      var tar = $(e.target);
      tar.siblings(".cho-num").hide();
      tar.siblings(".sure-num").show();
      tar.hide();
      tar.parent().siblings(".tag-state").show();
    },
    next() {
      sessionStorage.goodsitem =JSON.stringify(this.tododetail);
      sessionStorage.item = JSON.stringify(this.todolist);
      this.$router.push({
        path: '/order/pickBill',
        query:{
          id:this.guid
        }
      })
    },
    getdata() {
      var self = this;
      var query = {
        Guid:this.guid
      };
      this.Ajax.post('SearchOrderDetailGuid', query).then(function(resp) {
        var result = resp.Datas;
        result.forEach(function(item){
          if(!item.PurchaserPoQty){
            item.PurchaserPoQty = item.SupplierPoQty;
          }
        });
        self.tododetail = result;
      });
      this.Ajax.post('SearchOrderGuidNew', query).then(function(resp) {
        self.todolist = resp.Data;
        self.getTHbill(self.todolist.Guid);
      });
    },
    getTHbill(guid) {
      var self = this;
      var userinfo = JSON.parse(localStorage.userinfo);
        var query = {
        BBillGUID: guid,
      };
      this.Ajax.post('SearchBBillGuidApi', query).then(function(resp) {
        if (resp.IsSuccess == true) {
          self.addlist = resp.Data;
        }
      });
    }
  }
}
</script>